<template>
    <div class="">
        <Row>
            <Input v-model="searchConName1" icon="search" @on-change="handleSearch1" placeholder="这里输入关键词" style="width: 150px" />
            <DatePicker type="date" placeholder="开始日期" style="width: 100px"></DatePicker>
            <DatePicker type="date" placeholder="结束日期" style="width: 100px"></DatePicker>
            <Select v-model="model11" filterable style="width: 100px" placeholder="请选择角色">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="ghost">
              <Icon type="ios-search" size="15"></Icon>
            </Button>
            <Button type="ghost">
              <Icon type="ios-download" size="15"></Icon>
            </Button>
            <Button type="ghost" icon="ios-cloud-upload"></Button>
        </Row>

        <br/>
        <Row>
            <Col span="24" class="padding-left-10">
            <Card>
                <div class="edittable-con-1">
                    <Table border ref="selection" :columns="columns" :data="columnsData"></Table>
                </div>
            </Card>
            </Col>
        </Row>

        <br/>

        <Row>
            <Col span="12">
            <Button type="success">新增</Button>
            <Button type="info" icon="ios-email-outline"></Button>
            <Button type="primary" icon="email"></Button>
            <Button type="error" icon="trash-b"></Button>
            </Col>

            <Col span="12">
            <Page style="float:right;" :total="40" size="small" show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
    </div>
</template>
<script>
// import IconSiwtch from '../../common/IconSwitch.vue';

export default {
  name: 'system-user',
  components: {
    // IconSiwtch
  },
  data () {
    return {
      columnsList: [],
      tableData: [],
      columns: [
        {
          type: 'selection',
          align: 'center',
          width: 50
        },
        {
          title: '序号',
          key: 'border'
        },
        {
          title: '编号',
          key: 'number'
        },
        {
          title: '用户名',
          key: 'user_name'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '角色',
          key: 'role',
          align: 'center'
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center'
        },
        {
          title: '最近登陆',
          key: 'logTime',
          align: 'center'
        },
        {
          title: '上次登陆IP',
          key: 'ip',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  icon: 'email'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }),
              h('Button', {
                props: {
                  type: 'success',
                  icon: 'edit'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }),
              h('Button', {
                props: {
                  type: 'error',
                  icon: 'trash-b'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              })
            ])
          }
        }
      ],
      columnsData: [
        {
          border: 0,
          number: 1,
          user_name: 'John',
          name: 'hhh',
          role: '1',
          email: '12@qq.com',
          logTime: '',
          ip: ''
        }
      ],
      searchConName1: '',
      model11: '',
      cityList: []
    }
  },

  methods: {
    handleSearch1 () {}
  },
  created () {}
}
</script>
<style>
</style>
